<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="demo"
        size="mini">
        添加
      </el-button>
      <admin-add v-if="AdddialogVisible" :visible.sync="AdddialogVisible" :close="closeAdd" :init="initialize"></admin-add>
      <el-button
        class="btn-delete"
        @click="deleteBulk"
        size="mini">
        批量删除
      </el-button>
    </el-card>
    <el-table ref="productTable"
              style="width: 100%;text-align: center"
              :data="tableData"
              border @select-all="selectionChange" @select="selectChange">
      <!---->
      <el-table-column
        prop="checkbox"
        label="" type="selection" width="180">
      </el-table-column>
      <el-table-column
        prop="adminHeadProtrait"
        label="头像 ">
        <template slot-scope="scope">
          <img :src="scope.row.adminHeadProtrait" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column
        prop="adminId"
        label="管理员id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="adminAccount"
        label="管理员账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="adminPassword"
        label="管理员密码">
      </el-table-column>
      <el-table-column
        prop="adminPhoneNumber"
        label="管理员手机号">
        <!--          字段待定-->
      </el-table-column>
      <el-table-column
        prop="role.roleName"
        label="管理员角色">
      </el-table-column>

      <el-table-column
        prop="adminStatus"
        label="管理员状态"  style="position: relative;z-index: 999">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.adminStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="demoOne(scope.row.adminId,scope.row.adminStatus)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="operation"
        label="管理员操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updateAdmin(scope.row)">编辑</el-button>
          <admin-update v-if="UpdatedialogVisible" :adminCookie="admin" :visible.sync="UpdatedialogVisible" :updateClose="closeUpdate" :init="initialize" :admin="adminUser"></admin-update>
        </template>
      </el-table-column>
    </el-table>

    <!--<el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCatForm" :model="productAttrCate" :rules="rules" label-width="120px">
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>
<style>
.el-table td, .el-table th {
  text-align: center;
}
</style>
<script>
import moment from 'moment'
import axios from "axios"
import adminAdd from "./adminAdd"
import adminUpdate from "./adminUpdate"
import Cookie from "js-cookie"
export default{
  name: "admin",
  inject: ['reload'],
  data () {
    return {
      value:true,
      value1:false,
      tableData: [],
      AdddialogVisible:false,
      UpdatedialogVisible:false,
      adminUser:{},
      selectCheckBox:[],
      admin:{}
    }
  },
  mounted () {
    var admin=Cookie.get("admin");
    this.admin=JSON.parse(admin);
    this.initialize();
  },
  methods: {
    //删除数组元素方法
    removeWithoutCopy(arr, item) {
      for(var i = 0; i < arr.length; i++){
        if(arr[i].adminId == item){
          //splice方法会改变数组长度，当减掉一个元素后，后面的元素都会前移，因此需要相应减少i的值
          arr.splice(i,1);
          i--;
        }
      }
      return arr;
    },

    deleteBulk(){
      this.$confirm('是否停用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.selectCheckBox)
        var json=JSON.stringify(this.selectCheckBox);
        console.log(json)
        axios.post("http://localhost:8001/admin/batchUpdate",{
          json
        }).then((data)=>{
          this.$message({
            type: 'success',
            message: '停用成功!'
          });
          this.initialize();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        });
      });
    },
    selectChange(val,row){
      console.log(row,val);
      if(val.length==0){
        console.log("取消选择");
        this.removeWithoutCopy(this.selectCheckBox,row.adminId);
        console.log(this.selectCheckBox)
      }else{
        this.selectCheckBox.push(row);
      }
    },
    selectionChange(val,row){
      console.log(val,row);
      if(val.length!=0){
        /*for (const i in val) {
          this.selectCheckBox.push(val[i].adminId);
        }*/
        for (let i = 0; i <val.length ; i++) {
          this.selectCheckBox.push(val[i]);
        }
      }else{
        console.log("取消全选");
        this.selectCheckBox=[];
      }
    },
    //初始化方法
    closeAdd(){
      this.AdddialogVisible=false;
    },
    closeUpdate(){
      this.UpdatedialogVisible=false;
    },
    demo(){
      this.AdddialogVisible=true;
      console.log(this.AdddialogVisible);
    },
    initialize(){
      console.log(1)
      var th=this;
      axios.get("http://localhost:8001/admin/select").then((data)=>{
        th.tableData=data.data;
        console.log(data.data)
      })
    },
    demoOne(id,status){
      console.log(id,status)
      axios.put("http://localhost:8001/admin",{
        adminId: id,
        adminStatus: status
      }).catch((r)=>{
        console.log(r);
      })
    },
    updateAdmin(row){
      console.log(row)
      this.adminUser=row;
      this.UpdatedialogVisible=true;
    },
    handleDelete (index, row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("http://localhost:8001/admin?id="+row.adminId).then((data)=>{
          console.log(data);
          this.initialize();
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    formatter (row, column) {
      return row.address
    },
    filterTag (value, row) {
      return row.tag === value
    },

    //关闭编辑窗口
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //编辑表单重置方法
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleExceed(files, fileList) {

    }
  },
  components: {
    "admin-add": adminAdd,
    "admin-update": adminUpdate
  }
}
</script>

<style scoped>

</style>
